<template>
  <div class="device-type">
    <div class="search">
      <el-form :inline="true">
        <el-form-item label="型号搜索：">
          <el-input v-model="name" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit"
            >搜索</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="resultinfo">
      <div class="hearder_botton">
        <el-button
          type="primary"
          icon="el-icon-circle-plus-outline"
          @click="addType"
          >新建</el-button
        >
      </div>
      <DeviceTypeTable :TypeList="TypeList" @updataType="updataType"/>
    </div>
      <MyPagination :page="page" :sumIndex="sumIndex" @updateIndex="updateIndex"/>
      <AddDialog ref="AddDialog" :addvisible.sync="addvisible"/>
  </div>
</template>

<script>
import AddDialog from './components/AddDialog.vue'
import { getVmType } from '@/api/device-type'
import DeviceTypeTable from './components/DeviceTypeTable.vue'
import { getDeviceInfo } from '@/api/device-manager'
export default {
  name: 'DeviceType',
  components: { DeviceTypeTable, AddDialog },
  data () {
    return {
      name: '',
      page: {
        pageIndex: 1, // 页数
        pageSize: 10, // 每页数量
        totalCount: 0 // 总数
      },
      TypeList: [],
      addvisible: false
    }
  },
  created () {
    this.getTypeList()
  },
  computed: {
    // 分页总页数
    sumIndex () {
      return Math.ceil(this.page.totalCount / this.page.pageSize)
    }
  },
  methods: {
    // 添加
    addType () {
      this.addvisible = true
    },
    // 搜索
    async onSubmit () {
      const { currentPageRecords, totalCount } = await getVmType({ ...this.page, name: this.name })
      this.TypeList = currentPageRecords
      this.page.totalCount = totalCount
    },
    // 渲染
    async getTypeList () {
      const { currentPageRecords, totalCount } = await getDeviceInfo(this.page)
      this.TypeList = currentPageRecords
      this.page.totalCount = totalCount
    },
    // 分页
    updateIndex (val) {
      this.page.pageIndex += val
      this.getTypeList()
    },
    // 修改
    updataType (row) {
      console.log(row)
      this.$refs.AddDialog.form = { ...row }
      this.addvisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
  .search {
    height: 64px;
    margin-bottom: 20px;
    padding-left: 17px;
    background-color: #fff;
    .el-form {
      padding-top: 12px;
      ::v-deep .el-form-item__label {
        font-weight: normal;
      }
      .el-button--primary {
        background-color: rgb(95, 132, 255);
        border: 0;
      }
    }
  }
  .resultinfo {
      background-color: #fff;
      padding: 20px 15px 19px 17px;
      // 按钮
      .hearder_botton {
        margin-bottom: 20px;
        .el-button--primary {
          background: linear-gradient(135deg, #ff9743, #ff5e20);
          border: 0;
        }
      }
    }
</style>
